<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= doc.title +'|'+ ctrl.site %></title>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link rel="stylesheet" href="/base.css">
	<link rel="stylesheet" href="/customer.css">
	<script src="/timeago.min.js"></script>
	<script src="/base.js"></script>
</head>
<body>
	<section class="top">
		<div class="view-width">
			<div class="top-nav-right">
				<% if(!ctrl.me_login) {%>
					<li><button onclick="show_box('l')" class="good-button-top" >Login</button></li>
					<li><button onclick="show_box('r')" class="good-button-top" >Rigist</button></li>
				<% }else {%>
					<li><a href=<%= "javascript:show_box('"+ctrl.me_id+"')" %> ><%= ctrl.me_nickname %></a></li>
				<% }%>
				<div id="login-box">
				</div>
			</div>
			<div class="top-nav-left">
				<li title="logo"><h1>LATTE FORUM 1.1</h1></li>
			</div>
		</div>
	</section>
	<section class="banner">
		<div class="view-width">
			<div class="banner-nav-right">
				<li><input type="text" class="less-width-searcher"><button>search</button></li>
				<li><a href="/editor"><button>Add</button></a></li>
			</div>
			<div class="banner-nav">
				<p class="breadcrums" style="font-weight: 300;>
					<a href="/">Home</a> - <a href=<%= '"/topic/'+doc['topic']+ '/0"' %> > 
						<%= doc['topic'] %> </a>
				</p>
			</div>
		</div>
	</section>
	<section class="main">
		<div class="view-width">
			<div class="post-ground ownner" ownner=<%= doc.ownner %> >
				<h2 style="font-size: larger;"> <%= doc.title %> </h2>
				<p style="padding: 5px 0 10px 0;">
					<span class="light">Author:<a class="a-no-underline" href=<%= '/user/'+doc.ownner %> ><%= doc['nickname'] %></a></span>
					<span class="light">Follow:<%= doc['reply_n'] %></span>
					<span class="light">Read:<%= doc['viewed'] %></span>
					<span class="light">Star:<%= doc['star'] %></span>					
					<span class="light good-time"><%= doc['date'] %></span>
				</p>
				<hr>
				<!-- if the first page about post,show the post content,else not -->
				<% if(ctrl.page==0) { %>
					<div>
						<!-- need transfer before-->
						<%- doc.content %>
					</div>
				<% }%>
				<p style="text-align: center;padding-top: 10px;" class="light">
					<button onclick=" <%= `Star('` +doc['_id']+ `')` %> ">star<%= ' '+doc['star'] %> </button>
					<button class="good-button show delete good-button-top" onclick="<%= `remove('post','`+doc['_id']+`')` %>">Delete</button>
				</p>
			</div>
			<ul class="replies-ul">
				<% if (replies.length) {%>
					<% for(var i in replies) {%>
						<% if(replies[i]) {%>
							<li ownner=<%= replies[i]['ownner'] %> class="ownner">
								<p>
									<span class="light"><%= (Number(i)+1)+'#' %></span>
									<span class="light">A:<a href=<%= '/user/'+replies[i]['ownner'] %>><%= replies[i]['nickname'] %></a></span>
									<span class="light">D:<span class="good-time"><%= replies[i]['date'] %><span</span>
								</p>
								<div class="reply-content-wrapper">
									<div>
										<%# without transfer %>
										<%- replies[i].content %>
										<button class="good-button" onclick="show_discuz_box()">reply<%= ' '+replies[i].discuz.length %></button>
										<button class="good-button delete" onclick=<%= `remove('reply','`+replies[i]['_id']+`')` %> >delete</button>
									</div>
								</div>				
								<div class="discuz-input">
									<ul class="discuz-ul" id="discuz-ul">
										<% for(var z in replies[i].discuz) {%>
											<% if(replies[i].discuz[z]) {%>
												<li ownner=<%= replies[i].discuz[z]['ownner'] %> class="ownner">
													<%= replies[i].discuz[z]['content']+"      -" %>
													<a href=<%= '/user/'+replies[i].discuz[z]['ownner'] %> > <%= replies[i].discuz[z]['nickname'] %> </a>
													<!-- discuz model is bad ,wiil rebuilt all the function about it-->
													<!-- <button class="good-button" onclick=<%= `remove('discuz','`+replies[i].discuz[z]['id']+`')` %>  class="delete">delete</button> -->
												</li>
											<% }%>
										<% }%>
									</ul>
									<ul class="discuz-ul">
										<li>
											<input type="text" name="reply_id" value=<%= replies[i]['_id'] %>  hidden>
											<input type="text" name="content" title="edit reply">
											<button onclick="add_discuz()">post</button>
										</li>
									</ul>
								</div>
							</li>
						<% }%>
					<% }%>
				<% }else {%>
					<li class="no-more" style="padding-top:5px;">No more reply</li>
				<% }%>
			</ul>
			<div id="pager" style="text-align: center;font-size: larger;">
				<li><a href=<%= (ctrl.page-1).toString() %> >&lt;</a></li>
				<li><input id="pager_numb" type="text" class="less-width" placeholder=<%= (parseInt(ctrl.page)+1).toString() %> >
					<button onclick="go_reply_page()">Go</button></li>
				<li><a href=<%= (ctrl.page+1).toString() %> >&gt;</a></li>
			</div>
			<form class="editor-reply" method='POST' action='/add_reply' onsubmit="return repost()" >				
				<p >Writing:</p>
				<input type="text" name="post_id" value=<%= doc['_id'] %> hidden>
				<input type="text" name="post_title" value=<%= doc['title'] %> hidden>
				<textarea name="content" autofocus title="edit reply to post" style="border: 1px solid;border-color:rgb(131, 102, 102);width: 801px;
    height: 95px;"></textarea>
				<input type="submit" value="Submit" class="v-align-top" style="width:6rem;height: 5.5rem;font-weight: 300;font-size: larger;">
			</form>
		</div>
	</section>
	<section class="foot">
		<input id="mine"  type="text" value=<%= ctrl.me_id %> hidden>
		<div class="view-width">
			<a href='https://gitee.com/ang111/latte'><img src='https://gitee.com/ang111/latte/widgets/widget_3.svg' alt='Fork me on Gitee'></img></a>
		</div>
	</section>

</body>
</html>